import React from 'react';
import { Upload, Icon, message,Spin } from 'antd';
import {issuePage} from './action';

import shouji from '../../../img/bearManage/pingtaiguanli_yemianshouji.png';
import uploadBg from '../../../img/bearManage/pingtaiguanli_yemiantianjia.png';

/**
 * (用于图片上传前的类型判断)
 * @param file:文件对象
 * @class WedList
 * @extends {Fn}
 */
function beforeUpload(file) {
  const isJPG = file.type === 'image/jpeg';
  if (!isJPG) {
    message.error('You can only upload JPG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJPG && isLt2M;
}

/**
 * main
 *
 * @class Page
 * @extends {Component}
 */
class Page extends React.Component{
  constructor(props){
    super(props)
    this.state={
      selectPage: 1,
      uploadLoading:false,
      imageUrl:'',
      previewImgShow:false,
      loading:false
    }
  }

  selectPage(type){
    this.setState({
      selectPage:type
    })
  }

  handleChange = (info) => {
    if (info.file.status === 'uploading') {
      this.setState({ uploadLoading: true });
      return;
    }
    if (info.file.status === 'done') {
      this.setState({
        imageUrl:info.file.response.data.avatar.url,
        uploadLoading: false,
      });
    }
  }

  previewImg = ()=>{
    this.setState({
      previewImgShow:true
    })
  }

  previewImgHide = ()=>{
    this.setState({
      previewImgShow:false
    })
  }

  issuePageReq = ()=>{
    this.setState({
      loading:true
    })
    const { imageUrl,selectPage } = this.state;
    let data = {
      img:imageUrl
    }
    if(selectPage == 1){
      data.type = 3,
      data.title = '启动页banner'
    }
    if(selectPage == 2){
      data.type = 1,
      data.title = '首页banner'
    }
    issuePage(data).then((res)=>{
      this.setState({
        loading:false
      })
      if(res.code == 200){
        message.success('发布成功！')
      }
    })
  }

  render(){
    const { selectPage,uploadLoading,imageUrl,previewImgShow,loading } = this.state;
    const uploadBtn = (
      <div className="w190 h190 upload-box center-box" id="uploadImg" style={{backgroundImage: `url(${uploadBg})`}}>
        <Icon style={{ fontSize: 20, color: '#2dd1ac' }} type={this.state.uploadLoading ? 'loading' : 'none'} />
      </div>
    )

    return(
      <div>
        <Spin tip="发布中"
          spinning={loading}
          delay={0}
          >
        <div className="bear-manage-page">
          <div className="cover-img center-box" onClick={this.previewImgHide} style={previewImgShow ? {display:'flex'} : {display:'none'}}>
            <div className="preview-box pr center-box"  style={{backgroundImage: `url(${shouji})`}}>
                <img src={imageUrl} alt="" />
            </div>
          </div>
          <div className="center-box select-head">
              <span className={"center-box " + (selectPage == 1 ? 'active-b' : '')} onClick={()=>this.selectPage('1')}>启动页</span>
              <span className={"center-box " + (selectPage == 2 ? 'active-b' : '')} onClick={()=>this.selectPage('2')}>首页头图管理</span>
          </div>
          <div className="home-page center-b-box mt20">
            <div className="column w790 center-box bcf">
                <Upload
                    name="avatar"
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    action="http://192.168.1.201/wedding.com/index.php/merchant/index/uploadImg"
                    beforeUpload={beforeUpload}
                    onChange={this.handleChange}
                >
                {imageUrl ? <img src={imageUrl} className="w190 h190" alt=""/> : uploadBtn}
                </Upload>
                <button className="bt w150 h50 f20 mt50" onClick={this.issuePageReq}>发布</button>
                <div className="f18 cc mt10 cp" onClick={this.previewImg}>预览</div>
            </div>
            <div className="w790 center-box">
                <div className="preview-box pr center-box"  style={{backgroundImage: `url(${shouji})`}}>
                    <img src={imageUrl}  alt="" />
                </div>
            </div>
          </div>
        </div>
        </Spin>
      </div>
    )
  }
}

export default Page;
